<template>
	<view>
		<view>
			<image src="../../static/bg.png" style="width: 100%;height: 300rpx;"></image>
		</view>
		<view>
			<view style="display: flex;margin-left: 60rpx;margin-right: 60rpx;border-bottom: 1px solid #D8D8D8;">
				<view style="font-size: 34rpx; line-height: 100rpx; width: 68rpx;margin-top: 54rpx;">账号</view>
				<input class="input" @input="inputs" name="input" v-model="loginname" placeholder="请输入账号" />
			</view>
			<view style="display: flex;margin-left: 60rpx;margin-right: 60rpx;border-bottom: 1px solid #D8D8D8;">
				<view style="font-size: 34rpx; line-height: 100rpx; width: 68rpx;margin-top: 54rpx;">密码</view>
				<input class="input" @input="inputed" name="inputpwd" v-model="password" placeholder="请输入密码" type="password"/>
			</view>
		</view>
		<view>
			<button v-if="active"  style="color: #FFFFFF; background-color: rgba(81, 154, 255, 0.3); border-radius:56rpx;width: 630rpx;margin-top: 98rpx;margin-left: 60rpx;">登录</button>
			<button v-else @click="btn" style="color: #FFFFFF; background-color: #519AFF; border-radius:56rpx;width: 630rpx;margin-top: 98rpx;margin-left: 60rpx;">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
				loginname:'msxc',
				password:'',
				isshow:true,
				active:true,
				username:'',
				mobile:''
			}
		},
		methods:{
			inputs(e){
				if(this.loginname!=''&&this.password!=''){
					this.active=false
				}
				else{
					this.active=true
				}
			},
			inputed(e){
				if(this.loginname!=''&&this.password!=''){
					this.active=false
				}
				else{
					this.active=true
				}
			},
			btn(){
				
				console.log(this.loginname,this.password);
				this.$myRequest({
					url:'/project_flood/v1/public/login/small_program',
					data:{"loginName":this.loginname,"loginPwd":this.password , "kind": "2", "ownerId": ""}
				}).then((res)=>{
					console.log(res);
					if(res.data.errorMsg=="您的密码输入错误，请重新输入正确的密码"){
						console.log('密码错误');
						uni.showModal({
							title:'登陆失败',
							content:'密码输入错误',
							showCancel:false,
						})
					}
					else if(res.data.errorMsg=="账号或密码错误！"){
						console.log('账号错误');
						uni.showModal({
							title:'登陆失败',
							content:'账号输入错误',
							showCancel:false,
						})
					}
					else if(res.data.errorMsg=="登录密码必填"){
						console.log('密码不的为空');
						
					}
					else{
						console.log('成功');
						uni.switchTab({
							url:'/pages/join/firstpage'
						})
						uni.setStorage({
							key:'userId',
							data: res.data.data.userId
						})
						uni.setStorage({
							key:'areaId',
							data: res.data.data.areaId
						})
						uni.setStorage({
							key:'level',
							data: res.data.data.level
						})
						uni.setStorage({
							key:'tokenUser',
							data:res.data.data.token
						})
					}
					this.username=res.data.data.userName
					this.mobile=res.data.data.mobile
					uni.setStorage({
						key:'userName',
						data:this.username
					})
					uni.setStorage({
						key:'mobile',
						data:this.mobile
					})
					})
				uni.removeStorage({
					key:'jiedao',
					success: (res) => {
						console.log('重置成功');
					}
				})	
				uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
						uni.setStorage({
							key:'lng',
							data:res.longitude
						})
						uni.setStorage({
							key:'lat',
							data:res.latitude
						})
				    }
				});
			}
		},
		onLoad() {
			
		}
	}
</script>

<style>
	.input{
		height: 100rpx;
		margin-left: 100rpx;
		margin-top:54rpx ;
	}
	.active{
		color: #FFFFFF;
		background-color: #519AFF;
		 border-radius:56rpx;
		 width: 630rpx;
		 margin-top: 98rpx;
		 margin-left: 60rpx;
	}
</style>
